<template>
  <uni-popup ref="popupRef" type="center" :isMaskClick="false">
    <view class="popup">
      <image src="/static/icon/components/tips.png" />
      <view class="title"> {{ title }} </view>
      <view class="tips"> {{ tips }} </view>
      <view class="btn">
        <view class="cancel" @tap="tapClick(false)"> {{ cancelText }} </view>
        <view class="confirm" @tap="tapClick(true)"> {{ confirmText }} </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
  import { ref, defineEmits } from 'vue';
  const emit = defineEmits(['tapPop'])
  const popupRef = ref()
  defineProps({
    title: {
      type: String,
      default: '提示'
    },
    tips: {
      type: String,
      default: '需要获取您现在当前位置，是否同意授权获取当前位置？'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmText: {
      type: String,
      default: '确认'
    }
  })
  const open = () => {
    popupRef.value.open()
  }
  const close = () => {
    popupRef.value.close()
  }
  const tapClick = (e) => {
    console.log(e);
    emit('tapPop', e)
  }
  defineExpose({
    open,
    close
  })
</script>

<style lang="scss" scoped>
  .popup {
    width: 269px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    padding: 30px 22px 20px 22px ;
    box-sizing: border-box;
    image {
      width: 80px;
      height: 80px;
    }
    .title {
      width: 34px;
      height: 21px;
      font-weight: bold;
      font-size: 17px;
      color: #333333;
      line-height: 21px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-top: 15px;
      margin-bottom: 10px;
    }
    .tips {
      width: 194px;
      height: 40px;
      font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
      font-weight: 400;
      font-size: 14px;
      color: #999999;
      line-height: 21px;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
    .btn {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 24px;
      font-size: 14px;
      .cancel, .confirm {
        width: 108px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        border-radius: 109px;
        box-sizing: border-box;
      }
      .cancel {
        color: #333333;
        background: #FFFFFF;
        border: 1px solid #999999;
      }
      .confirm {
        color: #ffffff;
        background: #FF3B1E;
      }
    }
  }
</style>